<script lang="ts" setup>
    import { ref, watch, reactive, onMounted, computed } from 'vue';
    import { useSettingStore } from '@/store/modules/settingStore';
    import IconSvg from './IconSvg';
    import { useI18n } from 'vue-i18n';

    // 数据响应
    const settingStore = useSettingStore();
    const webSettingVisible = ref(false);
    const settingPageAnimationdirection = computed(() => settingStore.getSettingAnimation);
    const size = computed(() => settingStore.getSettingWidth);
    const device = computed(() => settingStore.getDevice);

    // 监听设置事件
    onMounted(() => {
        setTimeout(() => {
            document.getElementsByClassName('web-setting')[0].addEventListener('click', () => {
                if (!webSettingVisible.value) {
                    webSettingVisible.value = true;
                }
            });
        }, 500);
    });

    const form = reactive({
        allPcLayout: settingStore.getAllPcLayout,
        pcLayout: settingStore.getLayout,
        webName: settingStore.getWebName,
        logoSvgName: settingStore.getLogoSvgName,
        webLanguage: settingStore.getWebLanguage,
        fontSize: settingStore.getFontSize,
        themeName: settingStore.getThemeName,
        menuAnimation: settingStore.menuAnimation,
        menuStyle: settingStore.getMenuStyle,
        menuWidth: settingStore.getMenuWidth,
        showLabel: settingStore.getShowLabel,
        showLabelIcon: settingStore.getShowLabelIcon,
        labelStyle: settingStore.getLabelStyle,
        // separateStyle: settingStore.getSeparateStyle,
        fixedHeader: settingStore.getFixedHeader,
        progress: settingStore.getProgress,
        refresh: settingStore.getRefresh,
        search: settingStore.getSearch,
        notify: settingStore.getNotify,
        fullScreeen: settingStore.getFullScreeen,
        lock: settingStore.getLock,
        lockScreen: settingStore.getLockScreen,
        unlockScreenPwd: settingStore.getUnlockScreenPwd,
        pageAnimation: settingStore.getPageAnimation,
        settingPageStyle: settingStore.getSettingPageStyle,
        settingAnimation: settingStore.getSettingAnimation,
        settingWidth: settingStore.getSettingWidth,
    });
    // 布局 value-实际选中值 全局或者单一
    const allLayoutOptions = [
        { value: '全局模块', label: 'globalModule' },
        { value: '单一模块', label: 'singleModule' },
    ];
    const layoutOptions = [
        { value: 'Y9Default', label: '左右' },
        { value: 'Y9Horizontal', label: '上下' },
        { value: 'Y9Default sidebar-separate', label: '浮动' },
    ];

    // 国际化
    const webLanguageOptions = [
        { value: '简体中文', label: 'zh' },
        { value: 'English', label: 'en' },
    ];

    // 字号
    const fontSizeOptions = [
        { value: '小', label: 'small' },
        { value: '中', label: 'default' },
        { value: '大', label: 'large' },
    ];

    // 主题
    const themeOptions = [
        { value: 'theme-default', label: '默认' },
        { value: 'theme-green', label: '绿' },
        { value: 'theme-blue', label: '蓝' },
    ];

    // 菜单移入方向控制
    const menuAnimationOptions = [
        { value: 'ltr', label: '左移入效果' },
        { value: 'rtl', label: '右移入效果' },
        { value: 'ttb', label: '下拉效果' },
        { value: 'btt', label: '上拉效果' },
    ];

    // 菜单背景
    let menuBgs = [
        new URL('../../assets/images/menu-bg5.png', import.meta.url).href,
        new URL('../../assets/images/menu-bg7.png', import.meta.url).href,
        new URL('../../assets/images/menu-bg8.png', import.meta.url).href,
        new URL('../../assets/images/menu-bg9.png', import.meta.url).href,
        new URL('../../assets/images/menu-bg10.png', import.meta.url).href,
    ];
    // 把已选中的背景排在第一位
    const currentMenuBg = computed(() => settingStore.getMenuBg);
    function sortImgs() {
        if (currentMenuBg.value) {
            menuBgs.unshift(currentMenuBg.value);
            menuBgs = [...new Set(menuBgs)];
        }
    }
    sortImgs();
    const menuBgOptions = [
        { key: 'bg1', src: menuBgs[0] },
        { key: 'bg2', src: menuBgs[1] },
        { key: 'bg3', src: menuBgs[2] },
        { key: 'bg4', src: menuBgs[3] },
        { key: 'bg5', src: menuBgs[4] },
        { key: 'bg6', src: menuBgs[5] },
        { key: 'bg7', src: menuBgs[6] },
        { key: 'bg8', src: menuBgs[7] },
        { key: 'bg9', src: menuBgs[8] },
        { key: 'bg10', src: menuBgs[9] },
    ];
    const menuBgChange = () => {
        settingStore.$patch({
            menuBg: form.menuBg,
        });
    };

    // 菜单宽度
    const menuWidthOptions = [
        { value: '60%', label: '60%' },
        { value: '70%', label: '70%' },
        { value: '80%', label: '80%' },
        { value: '90%', label: '90%' },
        { value: '100%', label: '100%' },
    ];

    // 标签风格
    const labelStyleOptions = [
        { value: 'left', label: '左边' },
        { value: 'right', label: '右边' },
        { value: 'top', label: '上面' },
    ];
    // const labelStyleChange = () => {
    //     settingStore.$patch({
    //         labelStyle: form.labelStyle
    //     })
    // }

    // 分栏风格
    // const separateStyleOptions = [
    //     { value: '分栏风格1', label: '分栏风格1' },
    //     { value: '分栏风格2', label: '分栏风格2' },
    //     { value: '分栏风格3', label: '分栏风格3' }
    // ]

    // 设置风格
    const settingPageStyleOptions = [
        { value: 'Dcat', label: 'Dcat' },
        { value: 'Admin-plus', label: 'Admin-plus' },
    ];

    // 设置移入方向控制
    const settingAnimationOption = [
        { value: 'ltr', label: '左移入效果' },
        { value: 'rtl', label: '右移入效果' },
        { value: 'ttb', label: '下拉效果' },
        { value: 'btt', label: '上拉效果' },
    ];

    // setting宽度
    const settingWidthOptions = reactive([
        { value: '15%', label: '15%' },
        { value: '20%', label: '20%' },
        { value: '25%', label: '25%' },
        { value: '30%', label: '30%' },
    ]);

    // 修复在上/下拉效果的时候，宽度问题
    watch(settingPageAnimationdirection, (newV, oldV) => {
        if (newV === 'ttb' || newV === 'btt') {
            settingWidthOptions[0].label = '40%';
            settingWidthOptions[1].label = '50%';
            settingWidthOptions[2].label = '60%';
            settingWidthOptions[3].label = '70%';
            settingWidthOptions[0].value = '40%';
            settingWidthOptions[1].value = '50%';
            settingWidthOptions[2].value = '60%';
            settingWidthOptions[3].value = '70%';
        } else {
            settingWidthOptions[0].label = '15%';
            settingWidthOptions[1].label = '20%';
            settingWidthOptions[2].label = '25%';
            settingWidthOptions[3].label = '30%';
            settingWidthOptions[0].value = '15%';
            settingWidthOptions[1].value = '20%';
            settingWidthOptions[2].value = '25%';
            settingWidthOptions[3].value = '30%';
        }

        form.settingWidth = settingWidthOptions[1].value;
        settingChange('settingWidth');
    });

    // 修改设置
    const settingChange = (key) => {
        if (key == 'pcLayout') {
            let getAllPcLayoutList: any = settingStore.getAllPcLayoutList || [];
            let name = import.meta.env.VUE_APP_NAME;
            let obj: any = { name, value: form.pcLayout };
            let found = false;
            for (let i = 0; i < getAllPcLayoutList.length; i++) {
                let item = getAllPcLayoutList[i];
                if (item.name == name) {
                    found = true;
                    getAllPcLayoutList[i] = obj;
                    break;
                }
            }
            if (!found) {
                getAllPcLayoutList.push(obj);
            }
            settingStore.$patch({
                allLayoutList: getAllPcLayoutList,
            });
        }
        settingStore.$patch({
            [key]: form[key],
        });
    };
    // 重置表单
    const resetFunc = () => {};
    // 提交表单
    const submit = () => {
        settingStore.$patch({
            allPcLayout: form.allPcLayout,
            webName: form.webName,
            logoSvgName: form.logoSvgName,
            webLanguage: form.webLanguage,
            fontSize: settingStore.getFontSize,
            themeName: form.themeName,
            menuAnimation: form.menuAnimation,
            menuStyle: form.menuStyle,
            menuWidth: form.menuWidth,
            showLabel: form.showLabel,
            showLabelIcon: form.showLabelIcon,
            labelStyle: form.labelStyle,
            // separateStyle: form.separateStyle,
            fixedHeader: form.fixedHeader,
            progress: form.progress,
            refresh: form.refresh,
            search: form.search,
            notify: form.notify,
            fullScreeen: form.fullScreeen,
            lock: form.lock,
            pageAnimation: form.pageAnimation,
            settingPageStyle: form.settingPageStyle,
            settingAnimation: form.settingAnimation,
            settingWidth: form.settingWidth,
        });
        webSettingVisible.value = false;
    };

    function setMenuBackGroundImageFunc(e) {
        const targetElement = e.target;
        if (!Array.from(targetElement.classList).includes('selected')) {
            const url = targetElement.style.backgroundImage.split('"')[1];
            settingStore.$patch({
                menuBg: url ? url : '',
            });
        }
    }
</script>

<template>
    <el-drawer
        custom-class="indexlayout-settings"
        :title="$t('网站设置')"
        v-model="webSettingVisible"
        :direction="settingPageAnimationdirection"
        :size="device !== 'mobile' ? size : '68%'"
        :z-index="2000"
    >
        <el-form id="webSettingForm">
            <el-form-item
                :label="$t('布局')"
                :rules="[
                    {
                        required: true,
                    },
                ]"
            >
                <el-select
                    v-model="form.pcLayout"
                    placeholder="选择"
                    :disabled="device === 'mobile' ? true : false"
                    @change="settingChange('pcLayout')"
                >
                    <el-option
                        v-for="item in layoutOptions"
                        :key="item.value"
                        :label="$t(`${item.label}`)"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <!--          <el-form-item :label="$t('布局影响')" :rules="[ { required: true }]">-->
            <!--            <el-radio-group v-model="form.allPcLayout" @change="settingChange('allPcLayout')">-->
            <!--              <el-radio-->
            <!--                  v-for="item in allLayoutOptions"-->
            <!--                  :label="item.label"-->
            <!--                  :key="item.label"-->
            <!--                  size="large"-->
            <!--              >{{ item.value }}-->
            <!--              </el-radio>-->
            <!--            </el-radio-group>-->
            <!--          </el-form-item>-->
            <el-form-item
                :label="$t('语言')"
                :rules="[
                    {
                        required: true,
                    },
                ]"
            >
                <el-radio-group v-model="form.webLanguage" @change="settingChange('webLanguage')">
                    <el-radio v-for="item in webLanguageOptions" :label="item.label" :key="item.label" size="large">{{
                        item.value
                    }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item
                :label="$t('字号')"
                :rules="[
                    {
                        required: true,
                    },
                ]"
            >
                <el-radio-group v-model="form.fontSize" @change="settingChange('fontSize')">
                    <el-radio v-for="item in fontSizeOptions" :label="item.label" :key="item.label" size="large">{{
                        $t(`${item.value}`)
                    }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item
                :label="$t('主题')"
                :rules="[
                    {
                        required: true,
                    },
                ]"
            >
                <el-select v-model="form.themeName" placeholder="选择" @change="settingChange('themeName')">
                    <el-option
                        v-for="item in themeOptions"
                        :key="item.value"
                        :label="$t(`${item.label}`)"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item :label="$t('菜单背景')">
                <template v-slot:default>
                    <el-scrollbar>
                        <div class="menu-bg-content" @click="setMenuBackGroundImageFunc">
                            <div
                                :class="{
                                    item: true,
                                    'item-off': currentMenuBg ? true : false,
                                    selected: currentMenuBg === '',
                                }"
                            >
                            </div>
                            <div
                                v-for="item in menuBgOptions"
                                :key="item.key"
                                :style="{ backgroundImage: 'url(' + item.src + ')', backgroundSize: 'cover' }"
                                :class="{ item: true, selected: currentMenuBg === item.src }"
                            ></div>
                        </div>
                    </el-scrollbar>
                </template>
            </el-form-item>
            <el-form-item :label="$t('菜单动画')" v-show="device === 'mobile'">
                <el-select v-model="form.menuAnimation" placeholder="选择" @change="settingChange('menuAnimation')">
                    <el-option
                        v-for="item in menuAnimationOptions"
                        :key="item.value"
                        :label="$t(`${item.label}`)"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('菜单宽度')" v-show="device === 'mobile'">
                <el-select v-model="form.menuWidth" placeholder="选择" @change="settingChange('menuWidth')">
                    <el-option
                        v-for="item in menuWidthOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="标签显示" >
                <el-switch v-model="form.showLabel" @change="settingChange('showLabel')" />
            </el-form-item> -->
            <!-- <el-form-item label="标签图标">
                <el-switch v-model="form.showLabelIcon" @change="settingChange('showLabelIcon')" />
            </el-form-item> -->
            <!-- <el-form-item label="标签位置">
                <el-select
                    v-model="form.labelStyle"
                    placeholder="选择"
                    @change="settingChange('labelStyle')"
                >
                    <el-option
                        v-for="item in labelStyleOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="分栏风格">
                <el-select v-model="form.separateStyle" placeholder="选择">
                    <el-option
                        v-for="item in separateStyleOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>-->
            <!-- <el-form-item label="设置风格">
                <el-select
                    v-model="form.settingPageStyle"
                    placeholder="选择"
                    :disabled="device === 'mobile' ? true : false"
                    @change="settingChange('settingPageStyle')"
                >
                    <el-option
                        v-for="item in settingPageStyleOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item> -->
            <el-form-item :label="$t('设置动画')">
                <el-select
                    v-model="form.settingAnimation"
                    placeholder="选择"
                    @change="settingChange('settingAnimation')"
                >
                    <el-option
                        v-for="item in settingAnimationOption"
                        :key="item.value"
                        :label="$t(`${item.label}`)"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('设置宽度')">
                <el-select
                    v-model="form.settingWidth"
                    placeholder="选择"
                    :disabled="device === 'mobile' ? true : false"
                    @change="settingChange('settingWidth')"
                >
                    <el-option
                        v-for="item in settingWidthOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('头部固定')">
                <el-switch v-model="form.fixedHeader" @change="settingChange('fixedHeader')" />
            </el-form-item>
            <el-form-item :label="$t('进度条')">
                <el-switch v-model="form.progress" @change="settingChange('progress')" />
            </el-form-item>

            <el-form-item :label="$t('刷新')">
                <el-switch v-model="form.refresh" @change="settingChange('refresh')" />
            </el-form-item>
            <el-form-item :label="$t('搜索')">
                <el-switch v-model="form.search" @change="settingChange('search')" />
            </el-form-item>
            <el-form-item :label="$t('通知')">
                <el-switch v-model="form.notify" @change="settingChange('notify')" />
            </el-form-item>
            <el-form-item :label="$t('全屏')">
                <el-switch v-model="form.fullScreeen" @change="settingChange('fullScreeen')" />
            </el-form-item>
            <el-form-item :label="$t('页面动画')">
                <el-switch v-model="form.pageAnimation" @change="settingChange('pageAnimation')" />
            </el-form-item>

            <el-form-item :label="$t('锁屏功能')">
                <el-switch v-model="form.lock" @change="settingChange('lock')" />
            </el-form-item>
            <el-form-item :label="$t('锁屏')">
                <el-switch v-model="form.lockScreen" @change="settingChange('lockScreen')" />
            </el-form-item>
            <el-form-item :label="$t('锁屏密码')">
                <el-input
                    :style="{ width: '60%' }"
                    v-model="form.unlockScreenPwd"
                    type="password"
                    show-password
                    @change="settingChange('unlockScreenPwd')"
                    :placeholder="form.unlockScreenPwd"
                ></el-input>
            </el-form-item>
        </el-form>
        <el-divider />
        <el-row class="mb-4" style="justify-content: end">
            <el-button style="background-color: var(--el-color-primary); color: #fff" @click="submit()">{{
                $t('保存')
            }}</el-button>
            <el-button @click="resetFunc()">{{ $t('恢复默认') }}</el-button>
        </el-row>
    </el-drawer>
</template>

<style lang="scss">
    #webSettingForm {
        .el-form-item--default .el-form-item__content {
            justify-content: end;
        }
        .el-form-item {
            align-items: center;
        }
        .menu-bg-content {
            display: flex;
            align-items: center;
            padding-top: 35px;

            .item {
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100px;
                height: 100px;
                margin: 10px;
                text-align: center;
                border-radius: 4px;
                background: var(--el-color-danger-light-9);
                color: var(--el-color-danger);

                &:hover {
                    cursor: pointer;
                }
            }
            .item-off {
                border: 1px solid var(--el-color-primary-light-5);
                &::before {
                    content: '无';
                    color: var(--el-color-primary-light-5);
                    font-weight: bold;
                }
            }
            .selected {
                box-shadow: 0 0 2px 2px #1890ff;
                &::before {
                    content: 'Current';
                    color: var(--el-color-primary-light-9);
                    opacity: 0.65;
                    font-weight: bold;
                    text-shadow: 5px 5px 2px var(--el-color-primary-light-1);
                }
            }
        }
    }
</style>
